<template>
  <div class="container">
    <!-- 标头 -->
    <div class="headerBox">
      <!-- <div class="header">
        时间 、 语言
        <div class="topLeft">
          <div class="time">
            <topTime></topTime>
            <LangChange></LangChange>
          </div>
          <div class="language"></div>
        </div>
        <div class="topRight">
          {{ getUserName }}
        </div>

      </div> -->
      <myNav></myNav>
    </div>

    <!-- logo区域 -->
    <!-- <div class="logoAreaBox">
      <div class="logoArea">
        <div class="left">
          <img src="@/assets/imgs/logo.png" alt="" @click="toHome">
        </div>
        <div class="right">
        </div>
      </div>
    </div> -->
    <myLogoArea></myLogoArea>


    <!-- 商品展示区域 -->
    <div class="showBox">
      <!-- 光晕 -->
      <div class="light">

      </div>

      <!-- 中间展示区域 -->
      <div class="show">
        <!-- 左侧 -->
        <div class="left">
          <!-- 图片展示区域 -->
          <div class="imgBox">
            <!-- 大图 -->
            <div class="bigImg">
              <img class="img" :src="`https:${ShopDatas.pic_url}`" alt="">
            </div>
            <!-- 小图 -->
            <div class="littleImg">
              <ul>
                <!-- <li class="hoverBig"><img class="img" src="@/assets/imgs/bg-search.png" alt=""></li>
                <li class="hoverBig"><img class="img" src="@/assets/imgs/bg-search.png" alt=""></li>
                <li class="hoverBig"><img class="img" src="@/assets/imgs/bg-search.png" alt=""></li>
                <li class="hoverBig"><img class="img" src="@/assets/imgs/bg-search.png" alt=""></li>
                <li class="hoverBig"><img class="img" src="@/assets/imgs/bg-search.png" alt=""></li> -->

                <li v-for="(item, index) in ShopDatas.item_imgs" :key="index"
                  :class="currentImg == item.url ? 'mouseMove' : ''" @mouseenter="moveToLi(item.url)">
                  <img v-if="ShopDatas" class="img" :src="`https:${item.url}`" alt="">
                </li>
              </ul>
            </div>

            <!-- 收藏商品 -->
            <div class="functionBox">
              <div class="collect">
                <span style="margin-right: 10px;">图</span>
                <span>收藏商品</span>
              </div>
            </div>
          </div>

          <!-- 右侧suk -->
          <div class="sukShow">
            <h2 class="title">
              {{ ShopDatas.title }}
            </h2>

            <!-- 直达链接 -->
            <div class="link">
              <a :href="ShopDatas.detail_url">直达链接 ></a>
            </div>

            <div class="price">
              <span class="currency">CN</span>
              <span class="amount">￥{{ ShopDatas.orginal_price }}</span>
              <span class="change">修改</span>
              <span>
                <el-tooltip content="Bottom center" placement="bottom" effect="light">
                  <!-- <div>？</div> -->
                </el-tooltip>
              </span>
            </div>

            <!-- 修改价格原因 -->
            <!-- <div class="resource">
              <span class="priceChangeText">价格修改原因：</span>
              <span class="selectText">未选择</span>
            </div> -->

            <!-- 付款时间 -->
            <div class="payTime">
              <span>
                09:00~18:00(北京时间)付款，预计6个小时内订购或响应 （周日除外）
              </span>
            </div>

            <div class="warehouse">
              <!-- 第一个步骤 -->
              <div class="setp_one">
                <div class="setp_left">
                  <span>①</span>
                  <span style="margin: 0 10px;">国内</span>
                  <span>></span>
                  <span style="margin: 0 10px;">AllChinaBuy仓库</span>
                  <span style="font-weight: 700; color: black;">华南仓</span>
                </div>
                <div class="setp_right">
                  <span>国内运费</span>
                  <span style="margin-left: 15px;">CN￥</span>
                  <input type="text" class="narrow-input" v-model="inputValue">
                </div>
              </div>
              <!-- 线条 -->
              <div class="line"></div>
              <!-- 第二个步骤 -->
              <div class="setp_two">
                <div class="setp_left">
                  <span>②</span>
                  <span style="margin: 0 10px;">AllChinaBuy仓库</span>
                  <span>></span>
                  <span style="margin: 0 10px;">你的地址</span>
                  <select name="" id="" class="selectAddress">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                  </select>
                </div>

                <div class="setp_right">
                  <span>国际运费</span>
                  <span style="margin-left: 10px;">图</span>
                </div>
              </div>
            </div>
            <div class="product-selector"> <!-- 产品规格选择容器 -->
              <!-- 遍历所有规格项，如颜色分类、尺码等 -->
              <!-- 使用 prop.key 作为唯一 key，提高渲染性能 -->
              <div class="prop-group" v-for="prop in ShopDatas.props_end" :key="prop.key">
                <div class="prop-title">{{ prop.title }}</div> <!-- 显示规格名称，例如“颜色分类”、“尺码” -->

                <div class="prop-options"> <!-- 规格选项的容器 -->
                  <!-- 遍历当前规格下的所有选项 -->
                  <!-- 选项样式类 -->
                  <!-- 每个选项的唯一 key 为 option.value -->
                  <!-- 点击事件：选中当前的选项 -->
                  <div v-for="option in prop.options" :key="option.value" class="option"
                    @click="selectOption(prop.key, option)">
                    <img v-if="prop.type === 'image-text' && option.img" :src="option.img" alt="" class="option-img"
                      :title="option.label" :class="selected[prop.key] === option.value ? 'active' : ''"
                      @click="setColor(option.label)" />


                    <span v-if="!(prop.type === 'image-text' && option.img)" class="option-label"
                      :class="selected[prop.key] === option.value ? 'activespan' : ''" @click="setSize(option.label)">{{
                        option.label }}</span>
                  </div>

                </div>
              </div>
            </div>



            <div class="quantity">
              <label>数量：</label>
              <el-input-number v-model="addCarData.quantity" controls-position="right" @change="handleChange" :min="1"
                :max="currentMaxNum" style="width: 100px;"></el-input-number>
            </div>

            <div class="payment-icons">
              <label>支付方式：</label>
              <img src="visa.png" alt="VISA" />
              <img src="wechat.png" alt="WeChat" />
              <img src="alipay.png" alt="Alipay" />
            </div>

            <div class="buttons">
              <el-button type="danger" plain round>立即购买</el-button>
              <el-button type="danger" round @click="addBuyCar">加入购物车</el-button>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="shop-info">
            <div class="shop-header">
              <span class="title">SHOP</span>
              <button class="enter-btn"><a :href="ShopDatas.seller_info.zhuy" target="_blank">进入店铺</a></button>
            </div>
            <div class="shop-name">{{ ShopDatas.seller_info.nick }}</div>
            <div class="score-section">
              <div class="main-score">
                <span class="score">---</span>
                <span class="label">综合指标</span>
              </div>
              <ul class="detail-score">
                <li>描述 <span>---</span></li>
                <li>服务 <span>---</span></li>
                <li>物流 <span>---</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 免责声明 -->
    <div class="textTip">
      <div class="text">
        <div class="content">
          <span>
            图
          </span>
          <span style="color: #00BEBF;padding: 0 10px;font-weight: 700;">免责声明</span>
          <span
            style="color: #666;font-size: 14px;">AllChinaBuy平台代购商品均来源于第三方购物平台，非AllChinaBuy所售商品，故涉及到商品版权和知识产权侵犯问题，AllChinaBuy概不负责，亦不承担任何法律责任。</span>
        </div>
      </div>
    </div>

    <!-- 商品详情 购买须知 售后服务 -->
    <div class="detail">
      <!-- 导航标签 -->
      <div class="tag" :class="{ 'isSticky': isSticky }" ref="stickyNav">
        <span @click="scrollTo('product-detail')">商品详情</span>
        <span @click="scrollTo('purchase-notice')">购买须知</span>
        <span @click="scrollTo('after-sale')">售后服务</span>
      </div>
    </div>


    <!-- 商品详情的展示区域 -->
    <div class="detailShowArea">
      <div class="box">
        <div class="moodsDetailArea" ref="product-detail">
          <div class="image-list">
            <img v-for="(imgUrl, index) in ShopDatas.desc_img" :key="index" :src="imgUrl" alt="图片">
          </div>
        </div>
        <div class="buyMustYesArea" ref="purchase-notice">

        </div>
        <div class="lastServerArea" ref="after-sale">

        </div>
      </div>
    </div>


  </div>
</template>

<script>
import topTime from '@/components/myHome/myBeiJingTime'
import LangChange from '@/components/myHome/myLangChange'
import myLogoArea from '@/components/myHome/myLogoArea'
import myNav from '@/components/myHome/myNav'
import axios from 'axios'

import { addCar } from "@/api/myBuyCar/index"

export default {
  name: "moodsShow",
  components: {
    topTime,
    LangChange,
    myLogoArea,
    myNav
  },
  data() {
    return {
      selected: {},
      num: 1,
      currentMaxNum: 1,
      ShopDatas: {
        // imgs: ['5.png', '6.png', '7.png', '8.png', '4.png'] // 存储图片
      }, // 商品数据
      inputValue: '', // 国内运费
      currentImg: '', // 当前选择的小图
      isSticky: false, // 三个售后详情固定定位的一个flag
      navOffsetTop: 0, // 当前窗口距离顶部的位置

      // 添加购物车选项的收集
      addCarData: {
        platform: null,
        productId: null, //
        skuId: null, //
        title: null,
        imageUrl: null, // 
        price: null, //
        quantity: 1, // 
        isSelect: '0', //
        color: null, //
        size: null,
        weightSuggestion: 10,
        totalPrice: 0, //
        warehouse: "上海仓库"
      },
      // 1. 先初始化数据结构
      ShopDatas: {
        pic_url: '@/assets/imgs/loading.gif', // 商品展示区域大图
        title: '', // 商品标题
        orginal_price: '', // 商品价格
        detail_url: '', // 直达链接
        item_imgs: '', // 五个小图片
        desc_img: '', // 商品详情里面的图片
        props_list: {}, // 购买商品的选项
        props_img: {},
        props_end: [],
        seller_info: {
          nick: '', // 商铺昵称
          zhuy: '' // 进入店铺的链接
        },
        selected: '', // 当前选择的项
        skus: {}
      }
    }
  },
  created() {
    // 2. 发起请求
    this.getProductDataAPI()
    // this.getProdectDataLocalStorage()

  },
  computed: {
    // 给图片添加 https
    addHttpsImg() {
      return `https:${this.ShopDatas.pic_url}`
    },
    getUserName() {
      return localStorage.getItem('username')
    },
    // 获取商品id（这个id是用来从淘宝获取数据的id）
    getProductLinkId() {
      return localStorage.getItem('productLinkId')
    }
  },
  mounted() {
    // 获取导航栏初始位置
    this.navOffsetTop = this.$refs.stickyNav.offsetTop
    console.log(this.navOffsetTop);
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    // 组件销毁时移除监听
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 设置颜色
    setColor(color) {
      this.addCarData.color = color;
    },
    // 设置大小
    setSize(size) {
      this.addCarData.size = size;
    },
    // 加入购物车
    addBuyCar() {
      addCar(this.addCarData).then(res => {
        if (res.code == 200) {
          this.$message.success('添加至购物车成功')
        }
      }).catch(error => {
        this.$message.error('添加至购物车失败')

      })
    },
    // 通过接口拿数据
    getProductDataAPI() {
      const id = this.getProductLinkId;
      // 产品id
      this.addCarData.productId = id;

      axios.get(`http://192.168.1.99:8080/linkToQueryProducts?id=${id}`)
        .then(res => {
          try {
            // 3. 安全解析JSON 
            const data = JSON.parse(res.data.msg);
            console.log(data)
            localStorage.setItem('data', JSON.stringify(data))
            this.addCarData.platform = data.api_type
            this.ShopDatas = data.item;
            this.ShopDatas.props_end = this.transformProps(this.ShopDatas.props_img, this.ShopDatas.props_list);

            console.log("得到的属性", this.ShopDatas.props_end)
          } catch (e) {
            console.error("JSON解析失败:", e);
          }
        })
        .catch(err => {
          console.error("请求失败:", err);
        });
    },
    // 通过缓存拿数据
    getProdectDataLocalStorage() {
      const data = JSON.parse(localStorage.getItem('data'))
      console.log(data);

      this.ShopDatas = data.item;

      this.ShopDatas.props_end = this.transformProps(this.ShopDatas.props_img, this.ShopDatas.props_list);

    },

    selectOption(key, option) {
      if (option.disabled) return; // 不可点击时不处理
      console.log(key, option);

      this.$set(this.selected, key, option.value); // 设置当前规格为选中项

      if (option.img !== null) {
        this.addCarData.imageUrl = option.img;
      }

      this.ShopDatas.skus.sku.forEach(res => {
        // 解析字符串为对象
        const objFromStr = res.properties.split(';').reduce((acc, pair) => {
          const [key, value] = pair.split(':');
          acc[key] = value;
          return acc;
        }, {});

        // 将对象的值转换为字符串
        const objStr = Object.fromEntries(
          Object.entries(this.selected).map(([k, v]) => [k, v.toString()])
        );

        // 比较
        const isEqual = JSON.stringify(objStr) === JSON.stringify(objFromStr);
        console.log(isEqual); // true

        if (isEqual) {
          // 给页面展示
          this.ShopDatas.orginal_price = res.price

          // 价格
          this.addCarData.price = res.price

          // 决定最大数量
          this.currentMaxNum = res.quantity;
          // skuID
          this.addCarData.skuId = res.skuId;
          // 标题
          this.addCarData.title = this.ShopDatas.title;


        }
      })

    },

    // 清洗完毕之后的数据
    transformProps(props_img, props_list) {
      const grouped = {};

      Object.entries(props_list).forEach(([id, name]) => {
        const [propId, valueId] = id.split(":");
        const [title, label] = name.split(":");

        if (!grouped[propId]) {
          grouped[propId] = {
            title,
            key: propId,
            type: 'text', // 默认 text，后面判断
            options: [],
          };
        }

        grouped[propId].options.push({
          label,
          value: valueId,
          img: props_img[id] || null,
          disabled: false,
        });

        // 如果该项有图片，就设置为 image-text 类型
        if (props_img[id]) {
          grouped[propId].type = 'image-text';
        }
      });

      // 转换为数组
      return Object.values(grouped);
    },

    scrollTo(id) {
      this.$refs[id].scrollIntoView({
        behavior: 'smooth' // 平滑滚动
      })
    },
    handleScroll() {
      // 判断是否应该固定导航栏
      this.isSticky = window.scrollY >= this.navOffsetTop
    },
    // 跳转到首页
    toHome() {
      console.log("!212");

      this.$router.push({ name: 'Index' });
    },

    // 移入小图片，大图变换，小图加动画
    moveToLi(url) {
      // 切换大图
      this.ShopDatas.pic_url = url;

      // 给小图加动画
      this.currentImg = url;

    },
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  min-width: 1352px;
  height: auto;
  background-color: #f5f5f5;


  // 标头
  .headerBox {
    height: 50px;
    // line-height: 50px;
    // min-width: 100%;
    width: 100%;
    background-color: #f5f5f5;

    .header {
      margin: 0 auto;
      min-width: 1190px;
      width: 90%;

      .topLeft {
        float: left;
      }


      .topRight {
        height: 50px;
        line-height: 50px;
        background-color: red;
        float: right;
      }
    }

  }

  // logo 区域
  // .logoAreaBox {
  //   align-items: center;
  //   background: #fff;
  //   box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15);
  //   display: flex;
  //   height: 90px;
  //   width: 100%;

  //   .logoArea {
  //     margin: 0 auto;
  //     width: 90%;

  //     .left {
  //       cursor: pointer;
  //       height: 40px;
  //       width: 272px;

  //       img {
  //         height: 40px;
  //         width: 272px;
  //       }
  //     }
  //   }
  // }

  .showBox {
    width: 100%;
    // height: 620px;
    background-color: #f5f5f5;
    position: relative;

    .light {
      background: linear-gradient(0deg, hsla(0, 0%, 100%, 0), #e2f2ff);
      content: "";
      height: 136px;
      opacity: .71;
      position: absolute;
      top: 0;
      width: 100%;
    }

    .show {
      // width: 1190px;
      width: 84%;
      // height: 500px;
      // background: white;
      margin: 0 auto;
      position: relative;
      top: 30px;
      display: flex;


      .left {
        margin-bottom: 10px;
        min-height: 582px;
        padding-bottom: 0;
        width: 84%;
        background: white;
        padding: 20px 0 20px 20px;
        margin-right: 10px;
        display: flex;

        // 左侧图片展示
        .imgBox {
          width: 380px;
          height: 100%;
          // border: solid 1px red;

          .bigImg {
            align-items: center;
            background: 50% no-repeat;
            background-size: contain;
            border: solid 1px #eee;
            display: flex;
            height: 380px;
            justify-content: center;
            position: relative;
            transition: all .2s linear;
            width: 380px;
            overflow: hidden;



            .img {
              width: 380px;
              height: 380px;
            }
          }


          .littleImg {
            width: 380px;
            height: 75px;


            ul {
              display: flex;
              list-style: none;
              width: 380px;
              padding: 0;
              margin: 0;

              .mouseMove {
                border: solid 3px black;
                height: 60px;
                min-width: 60px;

                img {

                  width: 100%;
                  /* 填充容器宽度 */
                  height: 100%;
                  /* 填充容器高度 */
                  object-fit: cover;
                  /* 保持比例裁剪 */
                  display: block;
                  /* 消除图片底部间隙 */
                  transition: transform 0.3s ease-out;
                  /* 图片单独过渡 */
                }
              }

              li {
                padding: 0;
                margin: 0;
                align-items: center;
                background: 50% no-repeat;
                background-size: contain;
                border: 1px solid #eee;
                cursor: pointer !important;
                // display: flex;
                // float: left;
                height: 60px;
                // justify-content: center;
                margin-right: 20px;
                margin-top: 15px;
                transition: all .1s linear;
                transform: scale(1);
                /* 初始状态 */
                width: 60px;

                img {
                  width: 60px;
                }
              }
            }


          }



          .functionBox {
            width: 100%;
            height: 30px;
            margin-top: 10px;
            display: flex;
            align-content: center;
            justify-content: space-around;

            .collect {
              height: 30px;
              display: flex;
              align-content: center;
              line-height: 30px;

              span {
                color: #999;
                font-size: 12px;
              }
            }
          }
        }

        // 右侧 suk
        .sukShow {
          font-family: Arial, sans-serif;
          padding: 0 20px 20px;
          width: 100%;

          .title {
            text-align: left;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            line-height: 1.5;
            color: black;
          }

          .link {
            color: #5097ff;
            cursor: pointer;
            display: inline-block;
            line-height: 20px;
            margin-top: 4px;
            font-size: 14px;
          }

          .price {
            color: red;
            font-size: 20px;
            margin: 10px 0;
            display: flex;
            height: 20px;
            line-height: 20px;

            .currency {
              margin-right: 4px;
              font-weight: bold;
            }

            .amount {
              font-weight: bold;
            }

            .change {
              border-radius: 2px;
              color: #00bebf;
              float: left;
              font-size: 12px;
              margin-left: 20px;
            }
          }

          // 修改价格原因
          .resource {
            // height: 15px;
            // border: solid 1px red;
            // line-height: 15px;
            width: 160px;


            .priceChangeText {
              color: #999;
              // display: flex;
              font-size: 12px;
              font-weight: 700;
              line-height: 24px;
            }

            .selectText {}
          }

          .payTime {
            color: #999;
            display: inline-block;
            font-size: 12px;
          }

          // suk区域
          .warehouse {
            background: #f9f9f9;
            margin-top: 10px;
            padding: 12px 15px;

            // 第一个步骤

            .setp_one {
              display: flex;
              justify-content: space-between;

              .setp_left {
                span {
                  color: #666;
                  font-size: 12px;
                }
              }

              .setp_right {
                span {
                  color: #666;
                  font-size: 12px;
                }

                .narrow-input {
                  width: 80px;
                  height: 26px;
                  outline: none;
                  border: solid 1px #eee;
                  border-radius: 5px;
                }
              }

            }

            // 线条
            .line {
              background: #ddd;
              height: 14px;
              width: 2px;
              margin-left: 5px;
              margin-top: -3px;
            }

            // 第二个步骤
            .setp_two {
              display: flex;
              justify-content: space-between;
              align-content: center;

              .setp_left {
                span {
                  color: #666;
                  font-size: 12px;
                }

                .selectAddress {
                  height: 30px;
                  width: 100px;
                  outline: none;
                  border: solid 1px #eee;
                  border-radius: 5px;
                }
              }

              .setp_right {
                // border: solid 1px red;
                line-height: 30px;

                span {
                  color: #666;
                  font-size: 12px;
                }

              }
            }
          }

          .product-selector {
            .prop-group {
              margin-bottom: 16px;

              .prop-title {
                font-weight: bold;
                margin-bottom: 8px;
              }

              .prop-options {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;

                .option {
                  border-radius: 4px;
                  cursor: pointer;
                  display: flex;
                  text-align: center;
                  align-items: center;
                  opacity: 1;
                  margin-right: 4px;
                  overflow: hidden;
                }

                .active {
                  border: solid 2px #00bebf;
                  color: #f60;
                }

                .option-img {
                  width: 40px;
                  height: 40px;

                }

                .option-label {
                  box-sizing: border-box;
                  cursor: pointer;
                  float: left;
                  margin: 6px 10px 0 0;
                  overflow: hidden;
                  border: 1px solid #e5e5e5;
                  border-radius: 15px;
                  padding: 5px 10px;
                }

                .activespan {
                  box-sizing: border-box;
                  cursor: pointer;
                  float: left;
                  margin: 6px 10px 0 0;
                  overflow: hidden;
                  border: 2px solid #00bebf;
                  border-radius: 15px !important;
                  padding: 5px 10px;
                }
              }
            }
          }

          // .size-options {
          //   margin-top: 15px;

          //   label {
          //     font-weight: bold;
          //     margin-right: 10px;
          //   }

          //   button {
          //     margin: 5px 10px 5px 0;
          //     padding: 6px 12px;
          //     border: 1px solid #ccc;
          //     border-radius: 4px;
          //     background-color: white;
          //     cursor: pointer;
          //     transition: all 0.2s;

          //     &.active {
          //       border: 2px solid #007aff;
          //       background-color: #e6f0ff;
          //     }

          //     &:hover {
          //       background-color: #f9f9f9;
          //     }
          //   }
          // }

          // .color-options {
          //   margin-top: 20px;

          //   label {
          //     font-weight: bold;
          //     margin-bottom: 6px;
          //     display: block;
          //   }

          //   .color-images {
          //     display: flex;
          //     gap: 10px;

          //     img {
          //       width: 50px;
          //       height: 50px;
          //       border: 1px solid #ccc;
          //       border-radius: 4px;
          //       cursor: pointer;
          //       object-fit: cover;

          //       &.selected {
          //         border: 2px solid #007aff;
          //       }

          //       &:hover {
          //         opacity: 0.85;
          //       }
          //     }
          //   }
          // }

          // 选择数量
          .quantity {
            margin-top: 20px;
            min-height: 160px;


            label {
              font-weight: bold;
              margin-right: 10px;
            }

            input {
              width: 50px;
              height: 30px;
              padding: 0 5px;
              font-size: 16px;
              text-align: center;
              border: 1px solid #ccc;
              border-radius: 4px;
            }
          }

          // 支付
          .payment-icons {
            margin: 20px 0;

            img {
              height: 20px;
              margin-right: 10px;
            }
          }
        }
      }

      .right {
        background: white;
        // width: 180px;
        width: 16%;
        min-height: 582px;


        .shop-info {
          font-family: Arial, sans-serif;
          width: 100%;
          border-right: 1px solid #eee;
          padding: 20px;

          .shop-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
              font-weight: bold;
              font-size: 14px;
            }

            .enter-btn {
              font-size: 12px;
              padding: 2px 6px;
              border-radius: 12px;
              background-color: black;
              color: white;
              border: none;
              cursor: pointer;
            }
          }

          .shop-name {
            margin-top: 6px;
            font-size: 14px;
            color: #333;
          }

          .score-section {
            margin-top: 10px;

            .main-score {
              display: flex;
              align-items: baseline;

              .score {
                font-size: 24px;
                color: #00c8c8;
                margin-right: 5px;
              }

              .label {
                font-size: 12px;
                color: #666;
              }
            }

            .detail-score {
              margin-top: 10px;
              font-size: 12px;
              color: #666;
              list-style: none;
              padding: 0;

              li {
                display: flex;
                justify-content: space-between;
                padding: 2px 0;
              }
            }
          }
        }
      }
    }
  }

  // 免责声明
  .textTip {
    width: 100%;
    font-family: PingFang SC, microsoft yahei, STHeitiSC-Light, simsun, sans-serif;
    font-size: 14px;
    font-style: normal;
    background-color: #f5f5f5;
    position: relative;
    z-index: 2;

    .text {
      width: 84%;
      margin: 0 auto;
      background: #fff;
      padding: 20px;
    }
  }

  .detail {
    background: #fff;
    width: 84%;
    margin: 10px auto;
    height: 50px;

    .tag {
      width: auto;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      transition: all 0.3s ease;

      span {
        color: #333;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
        line-height: 50px;
        padding: 0 80px;

        &:hover {
          color: #00bebf;
        }
      }
    }

    .isSticky {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      animation: slideDown 0.3s ease-out;
    }
  }

  .detailShowArea {
    width: 84%;
    margin: 10px auto;

    .box {

      .moodsDetailArea {
        background: #fff;

        width: 100%;
        max-height: 1000px;
        /* 限制容器高度 */
        overflow-y: auto;
        /* 启用垂直滚动 */
        border-radius: 4px;

        .image-list {
          // display: grid;
          // grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
          // /* 自适应列数 */
          // gap: 10px;
          // /* 图片间距 */
          // padding: 10px;
          width: 1000px;
          /* 占满父容器宽度 */
          margin-bottom: 10px;
          /* 图片间距 */
          // padding: 20px 180px;
          margin: 0 auto;

          img {
            width: 100%;
            height: auto;
            display: block;
            /* 消除图片底部间隙 */
            object-fit: cover;
            /* 保持比例裁剪（可选） */
          }
        }
      }

      .buyMustYesArea {
        margin: 20px 0;
        height: 500px;
        background: #fff;



      }
    }
  }
}
</style>